<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title> Prototype </title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<link href="css/colorbox.css" rel="stylesheet" type="text/css" />
		<link href="css/qtip.css" rel="stylesheet" type="text/css" />
		<script type='text/javascript' src='js/jquery.js'></script>
		<script type='text/javascript' src='js/jquery-ui.js'></script>
		<script type='text/javascript' src='js/qtip.js'></script>
		<script type='text/javascript' src='js/colorbox.js'></script>
		<script>
  			$(function() {
				//making the draggable feature work with AJAX
			    (function ($) {
			      $.fn.liveDraggable = function (opts) {
				this.live("mouseover", function() {
					    if (!$(this).data("init")) {
					      $(this).data("init", true).draggable(opts);
					    }
					  });
			      };
			    }(jQuery));
				//Draggable function
			    $( ".draggable" ).liveDraggable({
											scroll: true,
					handle: "img",
					drag: function(event, ui){
						$(this).css({'z-index' : '0'});
						$(this).find('img').removeClass("mousdowns").stop()
									.animate({
												marginTop: '0', 
												marginLeft: '0',
												top: '0', 
												left: '0', 
												width: ''+$(this).find('img').attr('w'), 
												height: ''+$(this).find('img').attr('h'), 
									}, 0);
										$(this).find('img').css({'border': '0px solid #ddd'});
										$(this).find('ul').css({'visibility':'hidden'});
										$(this).removeClass('1st');
					}
				});
				//Droppable function
				$( "#droppable" ).droppable({
					hoverClass: 'open',
					drop: function( event, ui ) {
						var text =  $.trim(ui.draggable.find('.searchterm').text()); //trim gets rid of whitespace before and after
						$("input").val(text);
						ui.draggable.remove();
						$("#ajax_loader").html( '<img id="ajax_indicator" style="margin: 0 0 0 275px;" src="images/ajax-loader.gif" />' );
						$("#images_container").fadeOut();
						$.get("main_logic.php", 
						      { ajax: "true",
							   q: text },
						      function(data){
							$("#images_container").html( data );
							setTimeout( '$("#images_container").fadeIn();', 300 );
							setTimeout( '$("#ajax_loader").html( "" );', 325 );
							

						      });
					}
				});
			//lightbox feature
			$("a[rel='example1']").colorbox({maxWidth:"700px",maxHeight:"500px"});
			//tooltip
			$('.draggable').live('mouseover', function(){
				$(this).qtip({
			   /*metadata: {
				  type: 'attr',
				  name: 'qtipOpts'
			   },*/
			   content: $(this).attr('content'),
			   position: {
				  at: 'bottom center', // at the bottom right of...
			   },
			   hide: {
				  fixed: true,
				  delay:300,

			   },
			   show:{ ready: true},
			   events: {
				  show: function(event, api) {
					 	$("a[rel='example1']").colorbox({maxWidth:"700px",maxHeight:"500px"});
				  }
			   }
			
			});
			});

		});
		
		
		</script>
	</head>
	<body>
		<div id="container">
			<div id = "header">
				<img src = "images/logo.png" alt=""></img>
			</div>
			<div id="searchform" >
				<div id="droppable" class="close"></div>
		<form class="ui-widget-header" onsubmit="return q.value!=''" method="GET" action=""  name="f""> 
					<input type="text" maxlength="2048" name="q" class="lst" autocomplete="off" size="40" title="Search" value="">
				</form>
		                <div id="ajax_loader" ></div>
			</div> 
	     <!--search form -->
<!--				<div class="draggable" class="ui-widget-content" >
					<img src="kevinlove.jpg"><p>ucla</p></img>
				</div>
				<div class = "tooltip">
					<p>UCLA</p>
					<img src="kevinlove.jpg"></img>
					<p>Related terms: Westwood, Los Angeles, Basketball </p>
				</div>
-->

			<div id="images_container">
			<!-- the 2 dimensional array store the image and the reference term. populate the array and the loop will generate the html code-->
		<?php 
		
		require_once( "main_logic.php" );

		?>
		        </div>
		</div><!--container -->
	</body>
</html>

